<!-- 组件用途 -->
<template>
  <div class="flex-r top-search">
    <div v-if="type == 'select'">
      <span>{{ leftTitle }}:</span>
      <el-select v-model="model" placeholder="请选择" @change="change">
        <el-option v-for="item in datas" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
    </div>

    <div v-if="type == 'input'">
      <span>{{ leftTitle }}:</span>
      <el-input v-model="model" placeholder="请输入" @change="change" />
    </div>

    <el-button v-if="type == 'search'" type="primary" @click="emit('clickSearch')">搜索</el-button>
  </div>
</template>

<script setup lang='ts'>
const props = withDefaults(
  // eslint-disable-next-line vue/valid-define-props
  defineProps<{ type?: string; model?: string | number | boolean; datas?: Array; leftTitle?: string }>(),
  {
    type: 'select',
    model: '',
    datas: [],
    leftTitle: ''
  }
)
const emit = defineEmits(['update:change', 'clickSearch'])
const change = () => {
  emit('update:change', props.model)
}
</script>
<style lang='scss' scoped>
.top-search {
  align-items: center;

  & > div {
    display: flex;
    align-items: center;
    margin-right: 15px;
    & > span {
      white-space: nowrap;
    }
  }
}
</style>